<template>
  <view class="contenter">
    <view class="tixian">
      <view class="img">
<!--        <u-image src="/static/tixian.png" width="100%" height="300rpx" ></u-image>-->
      </view>
      <view class="head ">
        <view class="u-flex">
          <view class="actver ">
            <item-image :type="'1'" :img="data.userimg" :size="122"  class="u-margin-right-8"  :fade="false"/>
          </view>
          <view class="user">
            <view class="name">{{data.nickname}}</view>
            <view class="boss u-flex flex_bt">
              <view class="bos">老板</view>
              <view class="price">总收入：￥{{data.balance}}</view>
            </view>
          </view>
        </view>
        <view class="content">
          <view class="flex_bt">
            <view>提现金额</view>
            <view class="" @click="detail">提现记录</view>
          </view>
          <view class="input u-flex">
            <view class="icon">￥</view><u-input v-model="form.price" placeholder="请输入提现金额"  type="number" height="100rpx" />
          </view>
          <view class="u-flex money" >
            <view class="name">可提现金额：{{data.balance - data.freeze_price}}</view>
            <u-icon name="question-circle"  color="#9C9C9A" size="28" @click="describe"></u-icon>
          </view>
        </view>
        <view class="userPrice u-flex" >
          <view class="u-flex flex_bt userName">
            <view class="left">姓名</view>
            <view class="right">{{data.nickname}}</view>
          </view>
          <view class="u-flex flex_bt userName">
            <view class="left">电话</view>
            <view class="right">{{data.phone}}</view>
          </view>
<!--          <view class="u-flex flex_bt userName">-->
<!--            <view class="left">提现到</view>-->
<!--&lt;!&ndash;            <view class="right">零钱</view>&ndash;&gt;-->
<!--          </view>-->
        </view>
      </view>
    </view>
    <modal-item v-if="showModal" ref="child" :item="content" :titleShow="false" @submit="chuli"  @close="close"></modal-item>
    <view class="bt" @click.once="submit">确认提现</view>
  </view>
</template>

<script>
import ModalItem from "../../components/item/modalItem";
export default {
  name: "index",
  components: {ModalItem},
  data(){
    return{
      form:{
        price:0,
      },
      content:'申请提现成功',
      showModal:false,
      type:0 ,//0是代表提现 1是点击描述
      data:{},
    }
  },
  computed:{

  },
  onShow(){
    this.setData()
  },
  methods:{
    setData(){
      this.$api.withdrawDeatil().then(res => {
        this.data = res.data
      })
    },
    // 體現記錄
    detail(){
      this.$u.route({
        url: '/pages/Withdrawal/record',
      });
    },
    // 提现
    chuli(){

      this.showModal = false
      if(this.type != 1){}
    },
    submit(){
      if(this.form.price === 0 || this.form.price === ''){
        return this.$u.toast('请输入提现金额！')
      }
      // if(this.form.price - (this.data.balance - this.data.freeze_price) <= 0){
      //   return this.$u.toast('您暂时没有钱可以提现！')
      // }
      let form = {
        type:'',
        price:this.form.price,
      }
      this.$api.application(form).then(res => {
        this.showModal = true
        this.setData()
      })

    },
    close(){
      this.showModal = false
    },
    // 描述
    describe(){
      this.type = 1
      this.content = this.data.withdraw_text
      this.submit()
    },
  },
}
</script>
<style lang="scss">
/deep/.u-input__input{
  height: 150rpx;
}
/deep/.uni-input-input{
  font-size: 72rpx;
  font-weight: bold;
}
</style>
<style scoped lang="scss">
  .tixian{
    position: relative;
    .head{
      padding-top: 50rpx;
      padding-left: 40rpx;
      padding-right: 40rpx;
      position: relative;
      z-index: 10;
      .actver{
        margin-right: 20rpx;
      }
      .user{
        width: 100%;

        .name{
          font-size: 28rpx;
          color: white;
          font-weight: bold;
          margin-bottom: 16rpx;
        }
        .boss{
          .bos{
            width: 112rpx;
            height: 42rpx;
            background: linear-gradient(180deg, #FCD8A0 0%, #EABD6E 100%);
            border-radius: 24rpx;
            font-size: 24rpx;
            color: $uni-text-color;
            text-align: center;
            line-height: 42rpx;
          }
          .price{
            font-size: 32rpx;
            font-weight: 800;
            color: white;
          }
        }
      }
    }
    .content{
      height: 350rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      margin: 0 auto;
      margin-top: 50rpx;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      .flex_bt{
        font-size: 28rpx;
        view{
          &:nth-child(2){
            color: $uni-color-primary;
          }
        }
      }
      .input{
        padding-top: 20rpx;
        .icon{
          font-size: 72rpx;
          font-weight: bold;
        }
      }
      .money{
        margin-top: 40rpx;
        .name{
          margin-right: 10rpx;
        }
        color: $uni-text-color-grey;
        font-size: 28rpx;
      }
    }
    .userPrice{
      height: 210rpx;
      width: 100%;
      background: white;
      padding: 0 20rpx;
      flex-flow: column;
      margin-top: 20rpx;
      .userName{
        width: 100%;
        flex: 1;
        border-bottom: 2rpx solid $uni-border-color;
        &:last-child{
          border: 0;
        }
      }
      .left{
        font-size: 32rpx;
        font-weight: 400;
        color: $uni-text-color;
      }
      .right{
        font-size: 32rpx;
        color: $uni-text-color-grey;
        font-weight: 400;
      }
    }
  }
  .img{
    background: url("https://yft.xibuts.cn/upload/bg/bg4.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 300rpx;
    width: 100%;
  }
  .bt{
    margin-top: 200rpx;
  }
</style>